<template>
<el-row id="banner">

  <transition name="banner1_title"
              v-on:before-enter="banner1_titleBeforeEnter"
              v-on:enter="banner1_titleEnter"
              v-on:after-enter="afterbanner1_titleEnter"
  >
    <p id="banner1_title" v-if="banner1_titleShow" class="banner1_title" ><span>码市学堂欢迎你</span></p>
  </transition>
  <transition name="banner1_desc"
              v-on:before-enter="banner1_descBeforeEnter"
              v-on:enter="banner1_descEnter"
              v-on:after-enter="afterbanner1_descEnter"
  >
    <p id="banner1_desc" v-if="banner1_descShow" class="banner1_desc" >0基础-周期短-包就业</p>
  </transition>
  <img src="../../assets/banner.png" id="banner1">

  <transition-group name="icon"
                    v-on:before-enter="iconBeforeEnter"
                    v-on:enter="iconEnter"
                    v-on:after-enter="aftericonEnter"
                    tag = ''
  >

    <img v-for="item in banner1Icons" @mousemove="move" style="z-index: 3" v-if="iconShow"  v-bind:key="item" :src="item.url"  class="banner1_icon banner1_icons" name="banner1_icon" />
  </transition-group>

  <transition name="wenhao"
              v-on:before-enter="wenhaoBeforeEnter"
              v-on:enter="wenhaoEnter"
              v-on:after-enter="afterwenhaoEnter"
  >
    <img src="../../assets/images/banner1_wenhao.png" class="banner1_icon" v-if="wenhaoShow" name="banner1_wenhao">
  </transition>

  <transition name="man"
              v-on:before-enter="beforeManEnter"
              v-on:enter="manEnter"
              v-on:after-enter="afterManEnter"
  >
    <img src="../../assets/images/banner1_man.png" class="banner1_icon" v-if="bannerShow" name="banner1_man">
  </transition>
</el-row>
</template>
<script>
  export default {
    data (){
        return {
          bannerShow: false,
          wenhaoShow : false,
          iconShow : false,
          banner1_descShow : false,
          banner1_titleShow : false,
          banner1Icons : {},
          count : 0
        }
    },
    methods:{

      beforeManEnter (el) {
        Velocity(el, { opacity: 0,translateX: '-400px' }, { duration: 0 })
      },
      manEnter (el , done) {
        Velocity(el, { opacity: 1 }, { duration: 600 })
        Velocity(el, { translateX: '460px' }, { duration: 600 })
        Velocity(el, { translateX: '0px' }, { duration: 600 , complete: done})
      },
      afterManEnter (el) {
        this.wenhaoShow = true;
      },
      wenhaoBeforeEnter (el) {
        Velocity(el, { opacity: 0}, { duration: 0 })
      },
      wenhaoEnter (el , done) {
        Velocity(el, { opacity: 0.9, scale:1.4, rotateZ : '-10deg' }, { duration: 1000})
        Velocity(el, { opacity: 1, scale:1, rotateZ : '0deg' }, { duration: 1000  , complete: done})
      },
      afterwenhaoEnter (el) {
        Velocity(el, { opacity: 0, scale:0, rotateZ : '-10deg' }, { duration: 500})
        this.iconShow = true;
      },
      iconBeforeEnter (el) {
        Velocity(el, { opacity: 0 , translateY : '300px'}, { duration: 0 })
      },
      iconEnter (el , done) {
        Velocity(el, { opacity: 0.2 , translateY :(Math.random()*300)+ 'px'}, { duration: 800 })
        Velocity(el, { opacity: 0.5 , translateY :(Math.random()*100)+ 'px'}, { duration: 800 })
        Velocity(el, { opacity: 0.8 , translateY :(Math.random()*(-100))+ 'px'}, { duration: 800 })
        Velocity(el, { opacity: 1 , translateY : '0px'}, { duration: 800  , complete: done})
      },
      aftericonEnter (el) {
        this.banner1_titleShow = true;
      },
      banner1_titleBeforeEnter (el) {
        Velocity(el, { opacity: 0,translateY : '600px'}, { duration: 0 })
      },
      banner1_descBeforeEnter (el) {
        Velocity(el, { opacity: 0, translateY : '600px'}, { duration: 0 })
      },
      banner1_titleEnter (el , done) {
        Velocity(el, { opacity: 1 ,  translateY : '0px'}, { duration: 1000  , complete: done})
      },
      afterbanner1_titleEnter (el) {
        this.banner1_descShow = true;
      },
      banner1_descEnter (el , done) {
        Velocity(el, { opacity: 1 , translateY : '0px'}, { duration: 1000  , complete: done})
      },
      afterbanner1_descEnter (el ) {

      },
      move (e) {
        var banner1_icons = this.$el.querySelectorAll('.banner1_icons')
        for (var i = 0; i<banner1_icons.length; i++) {
//          Velocity(banner1_icons[i] , 'finish')
          Velocity(banner1_icons[i], { opacity: 0.5 , translateX :(Math.random()*10)+ 'px',translateY :(Math.random()*5 - 5)+ 'px'}, { duration: 800 })
        }
      }
    },
    computed:{
    },
    mounted() {
      this.axios.get(this.$store.state.API_ROOT+ 'bannerIcon').then((response) => {
        this.banner1Icons = response.data

      console.log(this.$store.state.API_ROOT)
        Array.from(this.banner1Icons).forEach((item)=>{
          let img = new Image()
          img.onload = ()=>{
            this.count++
          }
          img.src=item.url
        })
      })



    },
    watch : {
      count (val,oldval) {
        if(val == 35){
          this.bannerShow = true
        }
      }
    }
  }

</script>

<style>

  #banner {
    position : relative;
    overflow: hidden;
  }
  #banner1 {
    display : block;
    width : 100%;
  }

  #banner1_title , #banner1_desc {
    width : 100%;
    text-align : center;
    position : absolute;
    color : #fff;
  }

  #banner1_title {
    top : 4.5%;
    opacity :0;
  }
  #banner1_title span {
    font-size : 1.4em;
    padding : 0.1em 0.4em;
    background : #eb9718;
  }
  #banner1_desc {
    font-size : 3.5em;
    font-weight : bold;
    font-family : 黑体;
    top : 14%;
    opacity :0;
  }

  .banner1_icon {
    position : absolute;
    width : 100%;
    bottom : 0;
    left : 0;
    z-index : 1;
    opacity:0;
  }

</style>
